<template>
	<view class="box">
		<view class="fan">
			<view class="shen">
				省钱月卡
			</view>
			<view class="dui" @click="dian()">
				兑换码兑换
			</view>
		</view>
		<view class="zhao" v-show="show">
			<view class="tanchu">
				<view>兑换码兑换</view>
				<view class="inpu">
					兑换码<input type="text" name="input" v-model="qwe" @input="changeDisabled(qwe)" />
				</view>
				<view class="queren">
					<button @click="qu()">取消</button><button :class="{hhh:isasd}" @click="asd"
						class="QUEREN">确认</button>
				</view>
			</view>
		</view>
		<view class="qq">
			开通团油省钱月卡每{{tabs[tabIdx].shi}}可省<span>￥{{tabs[tabIdx].jin}}</span>
		</view>
		<view class="hong">
			<h2>{{tabs[tabIdx].jin}}元省钱红包</h2>
			<view class="ka">
				<view class="one">
					<view class="one1">16元{{tabs[tabIdx].conten}}</view>
					<view class="one2">满188可用</view>

				</view>
				<view class="one">
					<view class="one1">16元{{tabs[tabIdx].conten}}</view>
					<view class="one2">满188可用</view>
				</view>
				<view class="one">
					<view class="one1">16元{{tabs[tabIdx].conten}}</view>
					<view class="one2">满188可用</view>
				</view>
			</view>
			<view class="kaika">
				<view class="xian"></view>
				<view class="xian1">开卡再享</view>
				<view class="xian"></view>
			</view>
			<view class="ke">
				<view class="zuo">
					<p>会员专属抽奖</p>
					<span>每日可抽加油券</span>
				</view>
				<view class="zuo">
					<p>会员客服</p>
					<span>帮你快速解决问题</span>
				</view>
			</view>
			<view class="gang">

			</view>
			<view class="xuanhuanka">
				<view class="x" v-for="(item,i) in tabs" :key="i" :class="[{'active':i == tabIdx}]"
					@click="switchTabs(i)">{{item.title}}
					<p>{{item.c}}</p><span>{{item.content}}</span>
				</view>

			</view>
			<view class="kaitong">
				<view class="kaitong1">{{tabs[tabIdx].j}}</view>
				<view class="kaitong2">立刻购买，得{{tabs[tabIdx].jin}}元红包</view>

			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				qwe: '',
				isasd: false,
				tabIdx: 0,
				tabs: [{
						title: '月卡',
						c: '￥25.9',
						content: '省钱卡',
						conten: '',
						jin: '48',
						shi: '月',
						j: '￥25.9/月',
					},
					{
						title: '季卡',
						c: '￥45.9',
						content: '省钱卡',
						conten: 'x3张',
						shi: '季度',
						jin: '114',
						j: '￥45.9/季',
					},
					{
						title: '半年卡',
						c: '￥87.9',
						content: '省钱卡',
						conten: 'x6张',
						shi: '半年',
						jin: '288',
						j: '￥87.9/半年',
					},
					{
						title: '年卡',
						c: '￥164.9',
						content: '省钱卡',
						conten: 'x12张',
						shi: '年',
						jin: '576',
						j: '￥164.9/年',
					}
				]
			}
		},
		methods: {
			dian() {
				this.show = true
			},
			qu() {
				this.show = false;
				this.qwe = ''
				// uni.redirectTo({
				// 	url: '/pages/huiyuan/huiyuan'
				// })
			},
			switchTabs(i) {
				console.log(i)
				this.tabIdx = i
			},
			asd(qwe) {
				if (this.qwe == "") {
					uni.showToast({
						title: " 请输入兑换码 ",
						icon: "none"
					})
				} else if (this.qwe != "666") {
					uni.showToast({
						title: "请输入正确的兑换码",
						icon: "none"
					})
				} else {
					uni.showToast({
						title: "已兑换",
						icon: "none",
					})
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/huiyuan/huiyuan'
						})
					}, 1500)
				}
			},
			changeDisabled(qwe) {
				if (this.qwe != "") {
					this.isasd = true;
				} else {
					this.isasd = false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		box-sizing: border-box;
		padding: 100rpx 50rpx;
		width: 100%;
		height: 1300rpx;
		background: linear-gradient(to right, #3b488e, #242752);
	}

	.fan {
		display: flex;
		justify-content: space-between;
		color: #f9dcb7;

		.shen {
			font-size: 40rpx;
		}

		.dui {
			margin-top: 15rpx;
		}
	}

	.zhao {
		width: 100%;
		height: 1300rpx;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;

	}

	.tanchu {
		// display: none;
		border-radius: 15rpx;
		text-align: center;
		position: absolute;
		top: 250rpx;
		width: 80%;
		margin-left: 5%;
		background-color: white;
		padding: 20rpx;
		box-sizing: border-box;

		.inpu {
			display: flex;
			width: 100%;
			margin-top: 30rpx;
			margin-left: 15%;

			input {
				border: #242752 1px solid;
				margin-left: 10rpx;
				width: 50%;
				text-align: left;
			}
		}

		.queren {
			display: flex;
			margin-top: 30rpx;

			button {
				width: 45%;
			}

			.QUEREN {
				color: #e0e0e0;
			}
		}
	}

	.hhh {
		background-color: red;
		color: white;
	}

	.qq {
		width: 100%;
		background: linear-gradient(to right, #ffedd2, #ecae6c);
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.qq span {
		font-weight: bold;
		font-size: 35rpx;
	}

	.hong {
		box-sizing: border-box;
		padding-top: 30rpx;
		width: 100%;
		text-align: center;
		height: auto;
		border-radius: 30rpx;
		margin-top: 30rpx;


		h2 {
			color: #ffd6a0;
			font-weight: bold;
			font-size: 40rpx
		}

		.ka {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;


			.one {
				width: 30%;
				height: 100rpx;
				background-color: #fde1ba;
				border-radius: 15rpx;

				.one1 {
					font-size: 40rpx;
				}

				.one2 {
					font-size: 25rpx;
					display: block;
					margin-top: 10rpx;
				}
			}
		}

		.kaika {
			display: flex;

			height: 150rpx;
			padding-left: 30%;

			.xian1 {
				color: #ffd6a0;
				font-weight: bold;
				font-size: 40rpx;
				margin-top: 50rpx;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}

			.xian {
				border-bottom: #ecae6c 5px solid;
				width: 50rpx;
				margin-bottom: 70rpx;
			}
		}

		.ke {

			display: flex;
			justify-content: space-between;

			.zuo {
				height: 150rpx;
				background-color: #30396a;
				border-radius: 15rpx;
				width: 47%;
				box-sizing: border-box;
				padding: 25rpx;

				p {
					font-size: 35rpx;
					color: #ffd6a0;
				}

				span {
					color: grey;
					display: block;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}

		.gang {
			width: 100%;
			border-bottom: grey 1px solid;
			margin-top: 30rpx;
		}

		.xuanhuanka {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.active {
				color: #000 !important;
				background: linear-gradient(to bottom, #fee5c2, #fee5c2) !important;

			}

			.x {
				width: 22%;
				height: 150rpx;
				background: linear-gradient(to bottom, #6d759c, #3f4774);
				color: #faddb7;
				padding-top: 15rpx;
				border-radius: 15rpx;
			}
		}

		.kaitong {
			display: flex;
			height: 100rpx;

			margin-top: 30rpx;
			line-height: 100rpx;

			.kaitong1 {
				color: #f9dcb7;
				font-weight: bold;
				width: 40%;
				border-radius: 50rpx 0 0 50rpx;
				background-color: #582a00;
			}

			.kaitong2 {
				color: #582a00;
				width: 60%;
				font-weight: bold;
				border-radius: 0 50rpx 50rpx 0;
				background-color: #f9dcb7;
			}
		}
	}
</style>
